import React, { useState } from 'react'
import style from './style.module.scss'
import { EditCollectionModal, EditPhotoModal } from '../../ModalView/EditModal'

interface EditBtnOutLineProps {
    data: any
    type: string
    width: string
    height: string
}

export default function EditBtnOutLine(props: EditBtnOutLineProps) {
    const [expend, setExpend] = useState(false)

    return (
        <>
            <div
                className={style.container}
                style={{
                    ['--width-' as any]: props.width,
                    ['--height-' as any]: props.height
                }}
                onClick={() => {
                    setExpend(true)
                }}>
                <span>编辑</span>
            </div>
            {expend ? (
                <div
                    onClick={() => {
                        setExpend(false)
                    }}>
                    {props.type == 'photo' ? (
                        <EditPhotoModal data={props.data} />
                    ) : (
                        <EditCollectionModal data={props.data} />
                    )}
                </div>
            ) : (
                ''
            )}
        </>
    )
}
